<template>
  <div>
    <a-modal v-model:visible="visible" title="批量编辑图片" :footer="false" @cancel="closeModel">
      <a-typography-paragraph type="secondary">
        只对当前页面的图片有效，请先利用搜索图片功能搜索图片，再进行批量操作
      </a-typography-paragraph>

      <!-- 批量编辑图片表单 -->
      <a-form ref="formRef" layout="vertical" :model="FormData">
        <a-form-item name="nameRule" label="名称规则">
          <a-input
            v-model:value="FormData.nameRule"
            placeholder="请输入命名规则，输入{序号}可动态生成"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="分类">
          <a-auto-complete
            v-model:value="FormData.category"
            placeholder="请选择图片分类"
            :options="categoryOptions"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="标签">
          <a-select
            v-model:value="FormData.tags"
            mode="tags"
            placeholder="请选择图片标签"
            :options="tagOptions"
            allow-clear
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" style="width: 100%" @click="handleSubmit"> 提交 </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  editPictureByBatchUsingPost,
  listPictureTagCategoryUsingGet,
} from '@/api/pictureController'

// 控制弹窗显示
const visible = ref(false)
const formRef = ref()

// 父组件传入的 props
interface Props {
  pictureList: API.PictureVO[]
  spaceId: number
  onSuccess: () => void
}
const props = withDefaults(defineProps<Props>(), {})

// 表单数据初始化
const FormData = reactive<API.PictureEditByBatchRequest>({
  nameRule: '',
  category: '',
  tags: [],
})

// 分类和标签选项
const categoryOptions = ref<{ value: string; label: string }[]>([])
const tagOptions = ref<{ value: string; label: string }[]>([])

// 打开弹窗
function openModel() {
  visible.value = true
}

// 关闭弹窗
function closeModel() {
  visible.value = false
}

// 点击按钮触发提交
function submitForm() {
  formRef.value?.submit()
}

// 提交表单逻辑
function handleSubmit() {
  if (!props.pictureList || props.pictureList.length === 0) {
    message.warning('没有图片可操作')
    return
  }

  editPictureByBatchUsingPost({
    pictureIdList: props.pictureList.map((p) => p.id),
    spaceId: props.spaceId,
    ...FormData,
  })
    .then((res) => {
      if (res.data.code === 200) {
        message.success('操作成功')
        closeModel()
        props.onSuccess?.()
      } else {
        message.error('操作失败：' + res.data.data)
      }
    })
    .catch(() => {
      message.error('操作异常')
    })
}

// 获取分类和标签
function getTagAndCategory() {
  listPictureTagCategoryUsingGet()
    .then((res) => {
      if (res.data.code === 200) {
        tagOptions.value = (res.data.data.tagList ?? []).map((t: string) => ({
          value: t,
          label: t,
        }))
        categoryOptions.value = (res.data.data.categoryList ?? []).map((c: string) => ({
          value: c,
          label: c,
        }))
      } else {
        message.error('获取分类和标签失败：' + res.data.data)
      }
    })
    .catch(() => {
      message.error('获取分类和标签异常')
    })
}

// 父组件可以通过 ref 调用
defineExpose({ openModel })

// 页面挂载时获取分类和标签
onMounted(() => {
  getTagAndCategory()
})
</script>
